<template>
	<view>
		<u-toast ref="uToast" />
		<view class="navStyle">
			<u-navbar :is-back="false" z-index=999 title="" :background="background">
				<view class="slot-wrap" @tap="goBack">
					<u-icon name="close" margin-left="30rpx" label="发布新主题" label-size="45" color="#000000" size="40" class="u-line-1"></u-icon>
				</view>
				<!-- 设置监听输入框输入数字的时候变绿否则禁用 -->
				<text style="margin-left: 300rpx;font-size:50rpx;color: #19BE6B;" @tap="send" class="u-line-1">发送</text>
			</u-navbar>
		</view>
		<view class="content">
			<u-sticky>
				<!-- 只能有一个根元素 -->
				<textarea :value="comment.proposeTitle" class="sticky u-line-2" auto-height placeholder="标题(最多输入30个字)" maxlength=30 @input="titleInput">
				</textarea>
			</u-sticky>
					<u-line style="margin-top: 10rpx;width: 750rpx;" color="#f4f4f5" />
			<textarea :value="comment.proposeQuestion" class="textStyle" placeholder="正文内容..." auto-height maxlength=500 @input="contentInput"></textarea>
		</view>
	</view>
</template>

<script>
	// 指定
	import {
		getComments,
		releaseComment
	} from "@/api/modules/commentarea";
	export default {
		data() {
			return {
				title: '这是问题的标题这是问题的标题这是问题的标题这是问题的标题',
				value: '',
				id:'',
				background: {
					backgroundColor: '#F3F4F6',
					backgroundImage: 'linear-gradient(45deg,#c2e9fb,#a1c4fd)'
				},
				comment:{			
					proposeTitle:'',
					proposeQuestion:'',
					courseId:'',
					proposeUserEmail:'',
				},
			}
		},
		methods: {
			send() {
				//console.log('内容发送')
				if(this.comment.proposeTitle == ""){
					this.$refs.uToast.show({
						title: '标题不能为空',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error', 
						// 如果不需要图标，请设置为false
						icon: false
					})
				}
				else if(this.comment.proposeQuestion == ""){
					this.$refs.uToast.show({
						title: '正文不能为空',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error', 
						// 如果不需要图标，请设置为false
						icon: false
					})
				}
				else if(this.comment.proposeUserEmail == ''||this.comment.courseId == ''){
					console.log('用户名或课程ID获取不到')
					console.log("发布人是："+this.comment.proposeUserEmail+",课程Id是："+this.comment.courseId)
				}
				else{
					//console.log("这是当前用户邮箱"+this.comment.proposeUserEmail)
					releaseComment(this.comment)
						.then(resp => {
							this.$refs.uToast.show({
								title: '主题发布成功',
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'success', 
								// 如果不需要图标，请设置为false
								duration:'1000',
								//back:true
							})
							setTimeout(function () {
							            // uni.navigateTo({
							            // 	url: '../courseDetails?courseID='+ uni.getStorageSync('courseId'),
							            	
							            // })
										uni.navigateBack(1)
							        }, 1000);
						})
						.catch(resp => {
							this.$refs.uToast.show({
								title: '发布失败',
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'error', 
								// 如果不需要图标，请设置为false
								duration:'1000',
							})
						})
				}
				
			},
			goBack(){
					uni.navigateBack(1)
			},
			//检测值并赋值
			titleInput(e){	
				this.comment.proposeTitle=e.detail.value
				//console.log(this.reply.answerContent)
			},
			contentInput(e){
				this.comment.proposeQuestion=e.detail.value
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		  let that  = this
		  that.comment.courseId = uni.getStorageSync('courseId'),
		  that.comment.proposeUserEmail = uni.getStorageSync('userEmail')
		}
	}
</script>

<style>
	.slot-wrap {
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
	.content {
		margin-right: 37rpx;
		height: 1000rpx;
	}

	.navStyle {
		display: block;
		background-color: #F29100;
		z-index: 999;
	}

	.sticky {
		margin-top:10rpx;
		padding-left: 20rpx;
		width: 750rpx;
		height: 75rpx;
		background-color: #FDF6EC;
		font-size: 40rpx;
		line-height: 75rpx;
		color: #2c3e50;
	}
	.textStyle{
		margin-top: 20rpx;
		margin-left: 10rpx;
	}
</style>
